<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS3版无缝滚动</title>
        <style>
        	*{
        		margin:0;
        		padding: 0;
        	}
        	body{
        		background-color: #000;
        	}
        	div{
        		width: 600px;
        		height: 200px;
        		margin:50px auto;
        		position: relative;
        		overflow: hidden;
        		/*border:1px solid red;*/
        	}
        	ul{
        		width: 1800px;
        		list-style: none;
        		height: 200px;
        		position: absolute;
        		left: 0;
        		top: 0;
        		animation:move 10s linear 0s infinite;
        	}
        	ul li{
        		width: 300px;
        		height: 200px;
        		float: left;
        	}

        	div:hover ul{
				animation-play-state: paused;
        	}

        	@keyframes move{
        		0%{
        			left:0;
        		}
        		100%{
        			left:-1200px;
        		}
        	}
        </style>
    </head>
    <body>
    	<div>
    		<ul>
    			<li><img src="images/53/1.jpg" alt=""></li>
    			<li><img src="images/53/2.jpg" alt=""></li>
    			<li><img src="images/53/3.jpg" alt=""></li>
    			<li><img src="images/53/4.jpg" alt=""></li>
    			<li><img src="images/53/1.jpg" alt=""></li>
    			<li><img src="images/53/2.jpg" alt=""></li>
    		</ul>
    	</div>
    </body>
</html>